<template>
  <div class="">
    <el-form :inline="true">
      <div style="display: flex; justify-content: space-between;">
        <div>
          <el-form-item>
            <el-input v-model="username" clearable placeholder="地址" style="width: 500px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="text-center">
      <vue2-ort-tree :data="data" :renderContent="renderContent" />
    </div>

    <!-- 创建浮窗盒子 -->
    <div v-show="BasicSwich" class="floating">
      <p>ID:{{ BasicInfo.userid }}</p>
      <p>Name:{{ BasicInfo.username }}</p>
    </div>

    <!-- 用户等级统计 -->
    <digUserLeveTotal v-if="modalStatus == 2" :info="currentInfo" />
  </div>
</template>

<script>
import { userNode } from '@/api/users'
import { GetEnum } from "@/api/ctrls.js";
import digUserLeveTotal from '../components/digUserLeveLTotal-node.vue'
export default {
  name: 'Name',
  components: { digUserLeveTotal },
  data() {
    return {
      // 筛选参数
      username: 'root', // 用户名

      // 列表
      listLoading: false,// 列表加载中
      tableData: [],
      totalCount: 0,
      PageIndex: 1,
      pageSize: 10000,

      optionsDls: {},
      hhrInfo: {},

      authList: [],
      props: {
        label: 'username',
        children: 'children'
      },

      data: {
        teamTotal: {
          selfU: 0, // 个人业绩
          jzIncomeA1: 0, // 个人静值收益A1
          jzIncomeA2: 0, // 个人静值收益A2
          nodeLeftU: 0, // 左节点团队业绩
          nodeRightU: 0, // 右节点团队业绩
          selfQy: 0, // 剩余权益值
          selfQyYx: 0, // 有效权益值
        },
      },
      initTeamTotal: {
        selfU: 0, // 个人业绩
        jzIncomeA1: 0, // 个人静值收益A1
        jzIncomeA2: 0, // 个人静值收益A2
        nodeLeftU: 0, // 左节点团队业绩
        nodeRightU: 0, // 右节点团队业绩
        selfQy: 0, // 剩余权益值
        selfQyYx: 0, // 有效权益值
      },

      // 悬浮盒子
      BasicSwich: false,
      BasicInfo: {},

      modalStatus: 0, // 打开组件弹窗参数
      currentInfo: {}, // 当前用户信息

    }
  },
  watch: {
    PageIndex(val) {
      this.getData()
    },
    pageSize(val) {
      this.getData()
    }
  },
  created() {
    this.username = this.$route.query.username || 'root'
    console.log(this.username);
  },
  async mounted() {
    this.getData()
    this.GetEnum();

  },
  methods: {
    /////////////////////////////////////////////////// 初始化 ////////////////////////////////////////////////
    /**列表刷新加载 */
    async init() {
      this.PageIndex = 1;
      this.getData();
    },
    // 点击事件
    handleNodeClick(data) {
      console.log(data);
      if (data.username != '') {
        this.username = data.username;
        this.getData();
      }
    },
    /////////////////////////////////////////////////// 数据请求 ////////////////////////////////////////////////
    /**获取主列表 */
    async getData() {
      this.listLoading = true
      const { data, code, success, msg } = await userNode({
        username: this.username
      })
      this.data = this.group(data);
      console.log('树形列表，', this.data)
      this.listLoading = false
    },
    // 分组筛选
    group(data) {
      let info = data
      info.children = [];
      if (info.teamTotal == null) {
        info.teamTotal = this.initTeamTotal;
      }
      for (let item in info) {
        if (item == "left") {
          let i = this.group(info.left);
          info.children[0] = i;
        } else if (item == "right") {
          let o = this.group(info.right);
          info.children[1] = o;
        }
      }
      return info;
    },
    // 渲染节点
    renderContent(h, data) {
      return h('div', {}, [
        h('div', {}, data.username || '无'),
        h('div', { class: 'mgintop10' }, '个人业绩：' + data.teamTotal.selfU),
        h('div', { class: 'mgintop10' }, [
          h('span', '个人静值收益A1：' + data.teamTotal.jzIncomeA1),
          h('span', { class: 'mginleft20' }, '个人静值收益A2：' + data.teamTotal.jzIncomeA2),
        ]),
        h('div', { class: 'mgintop10' }, [
          h('span', '左节点团队业绩：' + data.teamTotal.nodeLeftU),
          h('span', { class: 'mginleft20' }, '右节点团队业绩：' + data.teamTotal.nodeRightU),
        ]),
        h('div', { class: 'mgintop10' }, [
          h('span', '剩余权益值：' + data.teamTotal.selfQy),
          h('span', { class: 'mginleft20' }, '有效权益值：' + data.teamTotal.selfQyYx),
        ]),
        // '节点用户等级统计' 按钮
        h('el-button', {
          class: 'mgintop10',
          on: {
            click: () => this.opneUserLevelTotal(data)
          }
        }, '节点等级统计'),
        // '查看此用户' 按钮
        h('div', {
          class: 'mgintop10color',
          on: {
            click: () => this.checkByusername(data)
          }
        }, [
          h('span', '查看此用户'),
          h('i', { class: 'el-icon-d-arrow-right' }),
        ]),
      ])
    },
    /**打开用户等级统计弹窗 */
    opneUserLevelTotal(info) {
      if (info.username) {
        this.currentInfo = info;
        this.modalStatus = 2;
      } else {
        this.$message({
          message: '无统计',
          type: "error"
        });
      }
    },
    // 点击查看此用户
    checkByusername(data) {
      if (data.username) {
        this.username = data.username;
        this.getData();
      } else {
        this.$message({
          message: '无数据',
          type: "error"
        });
      }
    },
    // 移开
    onMouseout(e, data) {
      this.BasicSwich = false
    },
    // 移入
    onMouseover(e, data) {
      this.BasicInfo = data;
      this.BasicSwich = true;
      var floating = document.getElementsByClassName('floating')[0];
      floating.style.left = e.clientX + 'px';
      floating.style.top = e.clientY + 'px';
    },
    // 获取枚举
    async GetEnum() {
      const res = await GetEnum();
      this.optionsDls = res.data['dls'];
      this.hhrInfo = res.data['hhr'];
    },
  }
}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.el-table .warning-row {
  background: oldlace;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 15px;

}

.span_tree {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap
}

/* 盒子css */
.floating {
  background: rgba(0, 0, 0, 0.7);
  width: 160px;
  height: 100px;
  position: absolute;
  color: #fff;
  padding-top: 15px;
  border-radius: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  left: 0;
  top: 0;
  transition: all 0.3s;
  z-index: 999;
  text-align: left;
  font-size: 12px;
}

.mgintop10 {
  margin-top: 10px;
}

.mginleft20 {
  margin-left: 20px;
}

.mgintop10color {
  margin-top: 10px;
  color: #409EFF;
}
</style>
